<template>

  <el-dialog :title="form.shop_user_id ? '编辑管理员' : '新增管理员'" style="width: 582px;" modal-class="dialog-add"
    v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
    <!--form表单-->
    <el-form size="small" ref="form" :inline="true" :model="form" :rules="formRules" :label-width="formLabelWidth">
      <el-form-item label="姓名" prop="user_name">
        <el-input v-model="form.user_name" maxlength="10" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" maxlength="11" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="is_delete">
        <el-radio-group size="mini" v-model="form.is_delete">
          <el-radio :label="0" size="mini">开启</el-radio>
          <el-radio :label="1" size="mini">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input style="width: 450px;" maxlength="20" v-model="form.notes" placeholder="请输入" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import AuthApi from '@/api/auth.js';
import { isPhone } from "@/utils/validate.js";
export default {
  data() {
    return {
      /*左边长度*/
      formLabelWidth: '70px',
      /*是否显示*/
      loading: false,
      /*是否显示*/
      dialogVisible: true,
      /*form表单对象*/
      form: {
        user_name: '',
        mobile: '',
        is_delete: 0,
        notes: ''
      },
      /*form验证*/
      formRules: {
        user_name: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          },
          {
            required: true,
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入手机号"));
              } else if (!isPhone(value)) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
          },
        ],
        is_delete: [
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
      }
    };
  },
  props: ['open', 'roleList'],
  watch: {
    open: function (n, o) {
      if (n != o) {
        this.dialogVisible = this.open;
      }
    }
  },
  created() { },
  methods: {
    /*添加*/
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let self = this;
          self.loading = true;
          let params = self.form;
          let key = 'userAdd'
          let msg = '新增成功'
          if (self.form.shop_user_id) {
            key = 'userEdit'
            msg = '编辑成功'
          }
          AuthApi[key](params, true)
            .then(data => {
              self.loading = false;
              ElMessage({
                message: msg,
                type: 'success'
              });
              self.dialogFormVisible(true);
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });

    },
    setTitle({ title, id, data }) {
      this.form.shop_user_id = id
      this.form.user_name = data.user_name
      this.form.is_delete = data.is_delete
      this.form.mobile = data.mobile
      this.form.notes = data.notes
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit('close', {
          type: 'success',
          openDialog: false
        });
      } else {
        this.$emit('close', {
          type: 'error',
          openDialog: false
        });
      }
    }
  }
};
</script>

<style></style>
